<template>
  <div style="display: flex;flex-direction: column">
  <div v-for="(element,index) in navigations" :key="index" @click="clickHandler(index,true)" class="normalStyle" :class="{'selectedStyle':element.selected}">
  <el-row style="align-items: center">
    <div v-show="element.selected" class="lineStyle"></div>
  <el-text line-clamp="2" style="width: 200px;margin: 10px">
    {{element.label}}
  </el-text>
  </el-row>
  </div>
  </div>
</template>

<script lang="ts" setup>
import {useRoute,useRouter} from "vue-router";
import {onMounted, reactive} from "vue";

defineProps<{content:string}>();

const route = useRoute();
const router = useRouter();

onMounted(()=>{
  const leftMenuIndex = Array.isArray(route.query.leftMenuIndex)
      ? route.query.leftMenuIndex[0]
      : route.query.leftMenuIndex;
  console.log(leftMenuIndex, 'leftMenuIndex');
  // 解析为整数
  const index = parseInt(leftMenuIndex||'0', 10);
  // 检查是否为有效数字
  if (!isNaN(index)) {
    clickHandler(index,false);
  } else {
    console.error('Invalid leftMenuIndex:', leftMenuIndex);
  }
});

function clickHandler(index:number, upRoute:boolean){
  navigations.forEach((e)=>e.selected=false)
  navigations[index].selected = true;

  if(upRoute){
    updateRoute(index);
  }
}

const updateRoute = (index:number) => {
  router.push({
    path: route.path,
    query: {
      ...route.query,
      leftMenuIndex: index,
    },
  });
};



/**/
let navigations = reactive([
  { label: '西安局集团公司职工培训部关于做好2023年新工岗前培训的通知西安局集团公司职工培训部关于做好2023年新工岗前培训的通知西安局集团公司职工培训部关于做好2023年新工岗前培训的通知西安局集团公司职工培训部关于做好2023年新工岗前培训的通知', selected: true },
  { label: '西安局集团公司职工培训部关于做好2023年新工岗前培训的通知西安局集团公司职工培训部关于做好2023年新工岗前培训的通知西安局集团公司职工培训部关于做好2023年新工岗前培训的通知西安局集团公司职工培训部关于做好2023年新工岗前培训的通知', selected: false },
  { label: '西安局集团公司职工培训部关于做好2023年新工岗前培训的通知西安局集团公司职工培训部关于做好2023年新工岗前培训的通知西安局集团公司职工培训部关于做好2023年新工岗前培训的通知西安局集团公司职工培训部关于做好2023年新工岗前培训的通知', selected: false },
  { label: '西安局集团公司职工培训部关于做好2023年新工岗前培训的通知西安局集团公司职工培训部关于做好2023年新工岗前培训的通知西安局集团公司职工培训部关于做好2023年新工岗前培训的通知西安局集团公司职工培训部关于做好2023年新工岗前培训的通知', selected: false },
  { label: '西安局集团公司职工培训部关于做好2023年新工岗前培训的通知西安局集团公司职工培训部关于做好2023年新工岗前培训的通知西安局集团公司职工培训部关于做好2023年新工岗前培训的通知西安局集团公司职工培训部关于做好2023年新工岗前培训的通知', selected: false },
  { label: '西安局集团公司职工培训部关于做好2023年新工岗前培训的通知西安局集团公司职工培训部关于做好2023年新工岗前培训的通知西安局集团公司职工培训部关于做好2023年新工岗前培训的通知西安局集团公司职工培训部关于做好2023年新工岗前培训的通知', selected: false },
])

</script>

<style scoped>
.el-row{
  flex-wrap:nowrap;
}

.lineStyle{
  width: 4px;
  height: 36px;
  background: #3C8DF9;
  border-radius: 0px 2px 2px 0px;
}

.normalStyle{
  gap: 10px;
  border-radius:  6px 0px 0px 6px;
  border: 1px solid #CBE9FF;
  align-items: center;
  background:#EEF8FE;
  cursor: pointer;/*鼠标移动上去是手型*/
}

.selectedStyle{
  background: transparent;
  border-right: none;     /* 去除右边边框 */
}


.main{
  background: chartreuse;
  justify-content: center;
  display: flex;
  flex-direction: row;
}
</style>